import React, { Component } from 'react';
import { get } from 'utils/http'
import Hhh from 'assets/images/hhh.png'
import { Carousel } from 'antd-mobile'
import { TheaterWrap } from './styledTheater'

class Theater extends Component {
    state = {
        list: []
    }

    async componentDidMount() {
        let result = await get({
            url:'/api/theatre/index/getTheatreList?page=1&version=6.0.9&referer=2'
        })

        this.setState({
            list: result.data.theatre_list
        })
    }
    render() {
        return (
            <TheaterWrap>
                <div className="head">
                    <div>
                        <header>剧院</header>
                    </div>
                </div>
                <div className="nimade">
                    {   
                        this.state.list.length && (
                            this.state.list.map((value,index) => {
                                if(value.showList.length){
                                    return (
                                        <div
                                    key={index} 
                                    className="main"
                                >
                                    <div className="content">
                                        <div className="first">
                                            <div className="finish">
                                                <div><img src={value.pic} alt=""/></div>
                                                <div>
                                                    <p>{value.name}</p>
                                                    <p>{value.count}场演出</p>
                                                </div>
                                            </div>
                                            <div className="work"><img src={Hhh} alt=""/></div>
                                        </div>
                                        
                                        {
                                            this.state.list[index].showList.length && (
                                        <Carousel
                                            autoplay={false}
                                            dots={false}
                                        >
                                        {
                                            this.state.list[index].showList.map((item,index2) => (
                                                <div key={index2} className="second">
                                                    <div className="sb">
                                                        <p>
                                                            <span>{item.show_time}</span>
                                                            <span></span>
                                                        </p>
                                                        <img src={item.pic} alt=""/>
                                                    </div>
                                                </div> 
                                            ))
                                        }
                                        </Carousel>
                                        )
                                    }
                                    </div>
                                </div>
                                    )
                                }
                            })
                        )
                    }
                </div>
            </TheaterWrap>
        );
    }
}
export default Theater;